<template>
    <div class="form">
        <el-form ref="form" :model="obj" label-width="130px" style="width:320px">
            <el-form-item label="原密码" prop="oldpass" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.oldpass" show-password clearable autocomplete="off" />
            </el-form-item>
            <el-form-item label="新密码" prop="newpass" :rules="[formRulesMixin.notNull,{validator: pass2, trigger: 'blur'}]">
                <el-input v-model="obj.newpass" show-password clearable autocomplete="off" />
            </el-form-item>
            <el-form-item label="再次输入新密码" prop="newpass2" :rules="[formRulesMixin.notNull,{validator: pass2, trigger: 'blur'}]">
                <el-input v-model="obj.newpass2" show-password clearable autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <span class="btn" @click.prevent="upData">提交</span>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance } from 'vue'
    let { proxy } = getCurrentInstance()
    let obj = reactive({
        oldpass: "",
        newpass: "",
        newpass2: "",
    });
    let pass2 = (rule, value, callback) => {
        if(obj.newpass != "" && obj.newpass2 != ""){
            if(obj.newpass != obj.newpass2){
                callback(new Error('两次新密码不一致'))
            }
        }
        callback()
    }
    let upData = () => {
        proxy.$refs['form'].validate(valid => {
            if (valid) {
                proxy.$ajax({
                    url: 'user/editpass',
                    data: obj,
                    bfLoading: true
                }).then(res => {
                    if(res.success){
                        proxy.elMessageMixin(`密码修改成功`, 'success')
                        proxy.$emit('close')
                        proxy.$emit('init')
                    }else{
                        proxy.elMessageMixin(res.err, 'error')
                    }
                }).catch(() => { })
            }else{
                return false
            }
        })
    }
</script>

<style scoped lang="scss">
</style>